<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="/css/adminMenu.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" language="javascript" src="/js/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" language="javascript" src="/js/ajaxfileupload.js"></script>
	<script type="text/javascript" language="javascript" src="/js/tool.js"></script>
	<title>琥珀川 - 管理翻盖面板列表</title>
	<style type="text/css">
		/*标题Font*/
		.tableTitleFont{
			padding-left:5px;
			color:white;
			font-size:14px;
			white-space:nowrap;
		}
		/*选项Font*/
		.itemFont{
			color:#666;
			font-size:12px;
			white-space:nowrap;
		}
		/*重复Font*/
		.repeatFont{
			color:green;
			font-weight:bold;
			font-size:12px;
			white-space:nowrap;
		}
		/*选项A*/
		.itemA{
			color:#09F;
			text-decoration:none;
			font-size:12px;
			white-space:nowrap;
		}
		input{
			margin:0px;
		}
	</style>
</head>

<body>
	<jsp:include page="/admin/include/menu" flush="true"/>
	<form id="searchForm" action="/admin/flipPanelList" method="get">
		<div class="mainDiv">
			<div>
				<table border="1">
					<tr>
						<td>
							<font>操作:</font>
						</td>
						<td>
							<input id="state" name="state" type="hidden" value="${state}"/>
							<c:choose>  
								<c:when test="${state == 'edit'}">
									<A class="itemA" href="javascript:clickSave()">[保存]</A>
									<A class="itemA" href="javascript:clickCancelEdit()">[取消编辑]</A>
								</c:when>
								<c:otherwise>
									<A class="itemA" href="javascript:clickEdit()">[编辑]</A>
								</c:otherwise>
							</c:choose>
						</td>
					</tr>
				</table>
			</div>
			<div>
				<table style="border:1px solid black;" border="0" width="100%">
					<tr style="background-color:#09F; color:white;">
						<td align="center">
							<font class="tableTitleFont">no</font>
						</td>
						<td align="center">id</td>
						<td align="center">
							<font class="tableTitleFont">翻盖面板图片</font>
						</td>
						<td align="center">
							<font class="tableTitleFont">名称</font>
						</td>
						<td align="center">
							<font class="tableTitleFont">颜色</font>
						</td>
						<td align="center">
							<font class="tableTitleFont">网址</font>
						</td>
						<td align="center">
							<font class="tableTitleFont">权重</font>
						</td>
						<td align="center">
							<font class="tableTitleFont">更新</font>
						</td>
					</tr>
					<c:forEach items="${flipPanelList}" varStatus="status" var="aFlipPanel">
						<tr 
							<c:choose>
								<c:when test="${status.index % 2 == 0}">style="background-color:#FCC;"</c:when>
								<c:otherwise>style="background-color:#FFC;"</c:otherwise>
							</c:choose>
						>
							<td align="center">
								${status.index+1}
							</td>
							<td align="center"> 
								${aFlipPanel.id}
								<input id="id_${status.index}" type="hidden" value="${aFlipPanel.id}"/>
							</td> 
							
							<%--图片--%>
							<td align="center">
								<img id="logoImg_${status.index}" src="${aFlipPanel.logoPath}" width="300"/>
								<%--判断是否为编辑模式--%>
								<c:if test="${state == 'edit'}">
									<div>
										<input id="tempImgName_${status.index}" type="hidden" />
										<input id="logoFile_${status.index}" name="logoFile_${status.index}" type="file" onchange="changeLogoPath(${status.index})" style="width:68px;" />
									</div>
								</c:if>
							</td>
							
							<%--名称--%>
							<td align="center">
								<%--判断是否为编辑模式--%>
								<c:choose>  
									<c:when test="${state == 'edit'}">
										<div>
											<input id="name_${status.index}" type="text" value="${aFlipPanel.name}" style="width:100px;" />
										</div>
										<div>
											<A href="/" class="itemA" target="_blank" title="/">[查看]</A>
										</div>
									</c:when>
									<c:otherwise>
										<A href="/" class="itemA" target="_blank" title="/">${aFlipPanel.name}</A>
									</c:otherwise>
								</c:choose>
							</td>
							
							<%--颜色--%>
							<td align="center">
								<%--判断是否为编辑模式--%>
								<c:choose>  
									<c:when test="${state == 'edit'}">
										<input id="color_${status.index}" type="text" value="${aFlipPanel.color}" style="width:100px;"/>
									</c:when>
									<c:otherwise>
										<div style="border:1px solid black; background-color:${aFlipPanel.color}; width:50px; height:20px;" title="${aFlipPanel.color}"></div>
									</c:otherwise>
								</c:choose>
							</td>
							
							<%--网址--%>
							<td align="center">
								<%--判断是否为编辑模式--%>
								<c:choose>  
									<c:when test="${state == 'edit'}">
										<div>
											<input id="url_${status.index}" type="text" value="${aFlipPanel.url}" style="width:100px;"/>
										</div>
										<div>
											<A href="${aActor.baikeUrl}" class="itemA" target="_blank" title="${aActor.baikeUrl}">[查看]</A>
										</div>
									</c:when>
									<c:otherwise>
										<A href="${aFlipPanel.url}" class="itemA" target="_blank" title="${aFlipPanel.url}">${aFlipPanel.url}</A>
									</c:otherwise>
								</c:choose>
							</td>
							
							<%--权重--%>
							<td align="center">
								<%--判断是否为编辑模式--%>
								<c:choose>  
									<c:when test="${state == 'edit'}">
										<input id="weight_${status.index}" type="text" value="${aFlipPanel.weight}" style="width:30px;"/>
									</c:when>
									<c:otherwise>
										<font class="itemFont">${aFlipPanel.weight}</font>
									</c:otherwise>
								</c:choose>
							</td>
							
							<%--更新--%>
							<td align="center">
								<font class="itemFont" title="${aFlipPanel.updateTime}">${aFlipPanel.updateTimeString}</font>
							</td>
						</tr>
					</c:forEach>
				</table>
			</div>
		</div>
	</form>
	<input id="pageSize" type="hidden" value="${fn:length(flipPanelList)}" />
</body>
<script type="text/javascript">
	<%--提交搜索表单--%>
	function submitSearchForm(){
		$("#searchForm").submit();
	}
	
	<%--提交搜索的Form表单--%>
	$("#searchForm").submit(function(){
		var state = $("#state").val();
		if(state == ""){
			$("#state").removeAttr("name");
		}
		
		var pageSize = 	parseInt($("#pageSize").val());
		for(var i = 0; i < pageSize ; i++){
			$("#logoFile_" + i).removeAttr("name");
		}
	});
	
	<%--点击编辑--%>
	function clickEdit(){
		$("#state").val("edit");
		$("#searchForm").submit();
	}
	
	<%--点击保存--%>
	function clickSave(){
		var pageSize = 	parseInt($("#pageSize").val());
		var dataSet = {};
		
		dataSet["pageSize"] = pageSize;
		for(var i = 0 ; i < pageSize ; i++){
			var id = $("#id_" + i).val();
			var name = $("#name_" + i).val();
			var tempImgName = $("#tempImgName_" + i).val();
			var color = $("#color_" + i).val();
			var url = $("#url_" + i).val();
			var weight = $("#weight_" + i).val();
			
			dataSet["id_"+i] = id;
			dataSet["name_"+i] = name;
			dataSet["tempImgName_"+i] = tempImgName;
			dataSet["color_"+i] = color;
			dataSet["url_"+i] = url;
			dataSet["weight_"+i] = weight;
		}
		
		tool.ajax({
			requestUrl:"/admin/ajax?action=flipPanelListSave",
			overtimeUrl:"/admin/login",
			dataSet:dataSet,
			success:function(msg){
				<%--演员名已存在--%>
				if(msg.stateCode == "name_exist"){
					alert("演员名\""+msg.name+"\"已存在");
				}
				<%--电影名不存在--%>
				else if(msg.stateCode == "movieName_not_exist"){
					alert("电影名\""+msg.name+"\"不存在");
				}
				<%--成功--%>
				else if(msg.stateCode == "success"){
					<%--调用取消编辑刷新页面--%>
					clickCancelEdit();
				}
			}
		});
	}
	
	<%--点击取消编辑--%>
	function clickCancelEdit(){
		$("#state").val("");
		$("#searchForm").submit();
	}
	
	<%--改变Logo路径事件--%>
	function changeLogoPath(no){
		tool.fileUpload({
			requestUrl:"/admin/ajax?action=uploadImg",
			overtimeUrl:"/admin/login",
			fileId:"logoFile_"+no,
			success:function(msg){
				if(msg.stateCode == "success"){
					$("#logoImg_"+no).attr("src","/image/temp/"+msg.tempImgName);
					$("#tempImgName_"+no).val(msg.tempImgName);
				}
				else if(msg.stateCode == "not_upload"){
					alert("没有上传海报");
				}
				else if(msg.stateCode == "error"){
					alert("上传错误,可能是格式错误");
				}
			}
		});
	}
</script>
</html>
